<template>
  <div>
    <span>&nbsp;</span>
    <el-form ref="form" :model="loan" label-width="100px" size="medium">
      <div>
        <el-form-item label="对象">
          <el-input v-model="loan.target" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="类型">
            <el-select v-model="loan.kind" placeholder="请选择">
              <el-option label="借入" :value="1"></el-option>
              <el-option label="借出" :value="2"></el-option>
            </el-select> 
        </el-form-item>
      </div>

      <div>
        <el-form-item label="金额">
          <el-input v-model="loan.num" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="借款时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              v-model="loan.startTime"
              style="width: 40%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="还款时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              v-model="loan.finalTime"
              style="width: 40%;"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </div>

      <!-- 备注-->
      <el-form-item label="备注">
        <tinymce :height="300" v-model="loan.description" />
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="SaveOrUpdate">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import saveLoanApi from "@/api/jd/save";
import Tinymce from "@/components/Tinymce"; //引入富文本编辑器组件

export default {
  components: { Tinymce },
  data() {
    return {
      loan: {
        target: "",
        kind: "",
        num: "",
        startTime: "",
        finalTime: "",
        description: ""
      }
    };
  },
  created() {
    this.init()
  },
  watch: {
    //监听
    $route(to, from) {
      //路由变化方式，只要路由发生改变，方法就会执行
      this.init();
    }
  },
  methods: {
    init(){
      if (this.$route.params && this.$route.params.id) {
        var id = this.$route.params.id;
        this.getLoanById(id);
      } else {
        this.loan = {};
      }
    },
    SaveOrUpdate(loan) {
      if (this.$route.params && this.$route.params.id) {
        var id = this.$route.params.id;
        this.updateById(this.loan,id);
      } else {
        this.submit(this.loan);
      }
    },
    updateById(loan,id){
      saveLoanApi.updateById(this.loan,id).then(response=>{
        this.$message({
          type: "success",
          message: "修改成功!"
        });
        this.$router.push({
          path: "/jd/list"
        });
      })
    },
    submit(loan) {
      saveLoanApi.saveLoan(this.loan).then(Response => {
        this.$message({
          type: "success",
          message: "添加成功!"
        });
        this.$router.push({
          path: "/jd/list"
        });
      });
    },
    getLoanById(id){
      saveLoanApi.getLoanById(id).then(response=>{
        this.loan=response.data.loanVo
        // if(this.loan.kind ==='1'){
        //   this.loan.kind = '借入'
        // }else{
        //   this.loan.kind = '借出'
        // }
      })
    },
  }
};
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>